<template>
  <div class="gamelist">
    <div class="list-wrapper" :class="{'pc': PC}">
      <ul v-infinite-scroll="loadBottom" :infinite-scroll-disabled="loading" infinite-scroll-distance="50"
          infinite-scroll-immediate-check="false">
        <li class="list-content border-1px" v-for="(item,$index) in list" :key="$index">
          <div class="list-detail" @click="openDetail(item)">
            <div class="img">
              <img width="100%" height="100%" :src="item.icon">
            </div>
            <div class="detail">
              <div class="header">
                <h1 class="title">{{item.name}}</h1>
                <span class="btn-s-red" v-if="item.if">礼包</span>
              </div>
              <p class="message-font" v-if="item.title">{{item.title}}</p>
              <p class="message-font" v-else-if="item.add_time">{{item.add_time}}</p>
            </div>
          </div>
          <a href="javascript:;" class="btn-green" @click="startGame(item.url)" v-if="type === 'start'">
            开始
          </a>
          <a class="money" v-if="item.pay">{{item.pay}}元</a>
        </li>
      </ul>
      <loading-icon v-if="loading"></loading-icon>
      <v-footer v-show="isAll"></v-footer>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import VFooter from '../../common/footer/footer'
  import LoadingIcon from '../../common/loading-icon/loading-icon'
  import {startGame} from '../../../assets/js/common'

  export default {
    data() {
      return {
        title: ['热门', '新上架', '猜你喜欢'],
        page: 1,
        totalList: '',
        total: '',
        list: [],
        isAll: false,
        loading: false,
        lastPage: ''
      }
    },
    watch: {
      // loading: function (value) {
      //   if (value) {
      //     this.Indicator.open({
      //       text: '拼命加载中(⊙o⊙)...',
      //       spinnerType: 'fading-circle'
      //     })
      //   } else {
      //     this.Indicator.close()
      //   }
      // }
    },
    props: {
      loadUrl: {
        type: String
      },
      type: {
        type: String
      },
      noFlip: {
        type: Boolean
      }
    },
    methods: {
      startGame,
      openDetail(item) {
        if (this.type === 'bill') {
          return false
        }
        let positionY = document.body.scrollTop || document.documentElement.scrollTop
        localStorage.setItem('positionY', positionY)
        this.Indicator.open({
          text: '拼命加载中(⊙o⊙)...',
          spinnerType: 'fading-circle'
        })
        this.$router.push({path: '/home/game/gameHall', query: item})
      },
      loadBottom() {
        this.page++
        if (this.lastPage > this.page) {
          this.loading = true
          this.$http.get(this.loadUrl, {
            params: {
              page: this.page
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.list = this.list.concat(response.data.data)
              this.totalList = this.list.length
              this.loading = false
            }
          })
        } else {
          this.isAll = true
          this.loading = false
        }
      }
    },
    created() {
      if (this.noFlip) {
        this.isAll = true
      }
      this.$http.get(this.loadUrl).then((response) => {
        if (response.data.code === this.ERROR_OK) {
          this.list = response.data.data
          this.total = response.data.total
          this.totalList = this.list.length
          this.lastPage = Math.ceil(this.total / 10)
          let positionY = Number.parseInt(localStorage.getItem('positionY'))
          if (positionY) {
            setTimeout(() => {
              window.scrollTo(0, positionY)
              localStorage.removeItem('positionY')
              this.Indicator.close()
              this.eventBus.$emit('loading', false)
            }, 1)
          }
          if (this.total <= 10) {
            this.isAll = true
          }
          if (this.list.length === 0 && this.$route.name === 'bill') {
            this.eventBus.$emit('noMore', true)
          } else if (this.list.length === 0 && this.$route.name === 'myGame') {
            this.eventBus.$emit('noMoreGame', true)
          }
          this.Indicator.close()
        }
      })
    },
    components: {
      VFooter,
      LoadingIcon
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../assets/stylus/mixin.styl"
  .gamelist
    .list-wrapper
      width 100%
      padding 0 32px
      box-sizing border-box
      &.pc
        padding-bottom 1.28rem
      .list-content
        position relative
        width 100%
        padding 24px 0
        border-1px(rgba(0, 0, 0, 0.2))
        &:last-child
          border-none()
        .list-detail
          display inline-flex
          .img
            flex 0 0 112px
          .detail
            position relative
            padding 10px 0
            margin-left 16px
            width 100%
            display flex
            flex-direction column
            box-sizing border-box
            .header
              display inline-flex
              padding 0
              align-items center
            .message-font
              margin-top 35px
              line-height 32px
              width 450px
              overflow hidden
              white-space nowrap
              text-overflow ellipsis
        .money
          position absolute
          top 66px
          right 0
          display block
          font-size 32px
          color #2ECC40
</style>
